<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WingCloud</title>
    <!--<link rel="stylesheet" href="css/bootstrap.css">-->
    <!--<link rel="stylesheet" href="css/font-awesome.css">-->
    <link rel="stylesheet" href="css/bootstrap.css">
    <!--<link rel="stylesheet" href="vendors/iconfonts/flag-icon-css/css/flag-icon.min.css">-->
    <!--<link rel="stylesheet" href="vendors/css/vendor.bundle.base.css">-->

    <link rel="stylesheet" href="css/styles.css"/>

    <link rel="stylesheet" href="css/search.css"/>
    <style>

        /*.navbar{*/
            /*position: fixed;*/
        /*}*/
        .navbar-inverse {
            background-color: #393D49;
            border-color: #393D49;
        }
        .navbar-brand {
            padding: 10px 15px;
        }
        .input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group {
            z-index: 2;
            margin-left: -1px;
            background: #fff;
        }




        [class*="icheck-"] {
            min-height: 22px;
            margin-top: 20px !important;
            margin-bottom: 6px !important;
            padding-left: 0px;
        }




        [class*="icheck-"] > label {
            padding-left: 29px !important;
            min-height: 22px;
            line-height: 22px;
            display: inline-block;
            position: relative;
            vertical-align: top;
            margin-bottom: 0;
            font-weight: normal;
            cursor: pointer;
        }

        [class*="icheck-"] > input:first-child {
            position: absolute !important;
            opacity: 0;
            margin: 0;
        }



        [class*="icheck-"] > input:first-child + label::before,
        [class*="icheck-"] > input:first-child + input[type="hidden"] + label::before {
            content: "";
            display: inline-block;
            position: absolute;
            width: 22px;
            height: 22px;
            border: 1px solid #D3CFC8;
            border-radius: 0px;
            margin-left: -29px;
        }

        [class*="icheck-"] > input:first-child:checked + label::after,
        [class*="icheck-"] > input:first-child:checked + input[type="hidden"] + label::after {
            content: "";
            display: inline-block;
            position: absolute;
            top: 0;
            left: 0;
            width: 7px;
            height: 10px;
            border: solid 2px #fff;
            border-left: none;
            border-top: none;
            transform: translate(7.75px, 4.5px) rotate(45deg);
            -ms-transform: translate(7.75px, 4.5px) rotate(45deg);
        }

        [class*="icheck-"] > input[type="radio"]:first-child + label::before,
        [class*="icheck-"] > input[type="radio"]:first-child + input[type="hidden"] + label::before {
            border-radius: 50%;
        }

        [class*="icheck-"] > input:first-child:not(:checked):not(:disabled):hover + label::before,
        [class*="icheck-"] > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
            border-width: 2px;
        }

        [class*="icheck-"] > input:first-child:disabled + label,
        [class*="icheck-"] > input:first-child:disabled + input[type="hidden"] + label,
        [class*="icheck-"] > input:first-child:disabled + label::before,
        [class*="icheck-"] > input:first-child:disabled + input[type="hidden"] + label::before {
            pointer-events: none;
            cursor: default;
            filter: alpha(opacity=65);
            -webkit-box-shadow: none;
            box-shadow: none;
            opacity: .65;
        }
        .icheck-asbestos > input:first-child:not(:checked):not(:disabled):hover + label::before,
        .icheck-asbestos > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
            border-color: #7f8c8d;
        }

        .icheck-asbestos > input:first-child:checked + label::before,
        .icheck-asbestos > input:first-child:checked + input[type="hidden"] + label::before {
            background-color: #7f8c8d;
            border-color: #7f8c8d;
        }
        .radio{
            position: relative;
            display: inline-block;
        }

    </style>

    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script src="js/bootstrap.min.js"></script>




</head>
<body>

<div class="total">
    <!--header-->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#"><span><img src="images/logo_white64.png"  width="180px" height="40"></span></a>
                <ul class="user-menu">
                    <li class="dropdown pull-right">
                        <!--<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> User <span class="caret"></span></a>-->
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <img class="img-circle" width="34" height="34" src="images/avatar-male.jpg" /><span id="name"></span><b class="caret"></b></a>

                        <ul class="dropdown-menu" role="menu">
                            <li><a>Settings</a></li>
                            <li id="help"><a>help</a></li>
                            <li id="logout"><a>Logout</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div><!-- /.container-fluid -->
    </nav>


    <!--search-->
    <div id="top-image">
        <div id="content" class="container center-block">
            <div class="jumbotron">
                <div class="container col-sm-12 col-md-9">
                    <h1>WingCloud</h1>
                    <p>WingCloud实时计算分析平台。</p>
                    <div class="input-group input-group-lg">
                            <div class="input-group-btn">
                                <button type="button"class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="buttonText">搜索方式</span>
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                  <li><a href="#" id="categories" onclick="shows($(this).text())" data-toggle="modal" data-target="#myModal">平台</a></li>
                                  <li><a href="#" id="keyvalue" onclick="shows($(this).text())">自定义</a></li>
                                </ul>
                            </div><!-- /btn-group -->
                        <input type="text" name="search-input" id="search-input" class="form-control" placeholder="输入关键词" aria-describedby="sizing-addon1"/>
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" id="search"><a href="screen/screen.html" style="text-decoration:none; color:#1b3548;">搜 索</a></button>
                        </span>

                    </div>

                    <div class="alert alert-success" id="keyvalue-id" role="alert" style="display: none">输入你要搜索的平台关键字哦</div>
                </div>
            </div>
        </div>
    </div>

</div>




<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">请选择店铺！</h4>
            </div>
            <div class="modal-body">
                <div>
                    <div class="radio icheck-asbestos">
                        <input type="radio" checked id="asbestos1" name="asbestos" value="天猫"/>
                        <label for="asbestos1">天猫</label>
                    </div>
                    <div class="radio icheck-asbestos">
                        <input type="radio" id="asbestos2" name="asbestos" value="淘宝"/>
                        <label for="asbestos2">淘宝</label>
                    </div>
                    <div class="radio icheck-asbestos">
                        <input type="radio" id="asbestos3" name="asbestos" value="京东"/>
                        <label for="asbestos3">京东</label>
                    </div>
                    <div class="radio icheck-asbestos">
                        <input type="radio" id="asbestos4" name="asbestos" value="唯品会"/>
                        <label for="asbestos4">唯品会</label>
                    </div>
                    <div class="radio icheck-asbestos">
                        <input type="radio" id="asbestos5" name="asbestos" value="拼多多"/>
                        <label for="asbestos5">拼多多</label>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="btn-asbestos" class="btn btn-primary" data-dismiss="modal">保存</button>
            </div>
        </div>
    </div>
</div>


<script>


    //点击模态框的保存按钮后将单选框内容添加到搜索表单中
    $(document).ready(function () {
        $("#btn-asbestos").click(function () {
            $("#search-input").val($("input[name='asbestos']:checked").val())
        })
    })

    //自定义提示信息的隐藏与显示
    $(document).ready(function() {
        $('#categories').click(function(){
            if($("#keyvalue-id").css('display')=='block'){
                $("#keyvalue-id").css("display","none");
            }
        })
        $('#keyvalue').click(function(){
            if($("#keyvalue-id").css('display')=='none'){
                $("#keyvalue-id").css("display","block");
            }
        })
    });

    //搜索框的下拉按钮选择后显示出来
    function shows(a) {
        $('.buttonText').text(a)
    }


    window.onload = function () {

        $.ajax({
            xhrFields: {
                withCredentials: true
            },
            url:"http://localhost:8080/api/user/getusermsg",//请求地址
            data:{},//提交的数据
            contentType:"application/text",
            //contentType: "application/x-www-form-urlencoded; charset=utf-8",
            type:"post",//提交的方式
            dataType:"json", //返回类型 TEXT字符串 JSON XML
            // beforeSend: function(request) {
            //     request.setRequestHeader("Authorization", MyLocalStorage.Cache.get('cookieKey'));
            // },
            success:function(data){

                if (data.user_name==null){
                    window.location.href = 'http://localhost:63342/wingcloud-web/login.html';
                }
                $("#name").html(data.user_name);

            },
            error:function(xhr, textStatus, errorThrown){
                //请求失败
                //通过状态码判断401
                // alert(xhr.status)
                // alert(xhr.readyState);
                // alert(textStatus);
                // if (xhr.status === 401) {
                //     alert('身份验证已过期，请重新登陆.');
                //     //返回首页
                //     window.location.href = 'http://localhost:63342/test/index.html?_ijt=5s2aqchoafa7q5126joj5blfc8';
                // }
                //alert(xhr.status+' '+xhr.readyState+' '+textStatus);
                window.location.href = 'http://localhost:63342/wingcloud-web/login.html';
            }
        })
    }

    $("#logout").click(function(){
        //alert(MyLocalStorage.Cache.get('cookieKey'))
        //第一步：取数据,这里用到了用户名和密码

        $.ajax({
            xhrFields: {
                withCredentials: true
            },
            url:"http://localhost:8080/api/user/logout",//请求地址
            data:{},//提交的数据
            contentType:"application/json",
            //contentType: "application/x-www-form-urlencoded; charset=utf-8",
            type:"post",//提交的方式
            dataType:"text", //返回类型 TEXT字符串 JSON XML
            // beforeSend: function(request) {
            //     request.setRequestHeader("Authorization", MyLocalStorage.Cache.get('cookieKey'));
            // },
            success:function(data){
                alert(data)
                window.location.href="login.html"
            },
            error:function(xhr, textStatus, errorThrown){
                //请求失败
                //通过状态码判断401
                // alert(xhr.status)
                // alert(xhr.readyState);
                // alert(textStatus);
                // if (xhr.status === 401) {
                //     alert('身份验证已过期，请重新登陆.');
                //     //返回首页
                //     window.location.href = 'http://localhost:63342/test/index.html?_ijt=5s2aqchoafa7q5126joj5blfc8';
                // }
                //alert(xhr.status+' '+xhr.readyState+' '+textStatus);
            }
        })

    })

    $("#help").click(function() {
        window.location.href="http://localhost:8080/swagger-ui.html"
    })
    /**
     * TODO
     * 搜索请求
     */
    // $("#search").click(function(){
    //     //alert(MyLocalStorage.Cache.get('cookieKey'))
    //     //第一步：取数据,这里用到了用户名和密码
    //     var keyword = $(" input[ name='search-input' ] ").val()
    //     //alert(keyword)
    //     $.ajax({
    //         xhrFields: {
    //             withCredentials: true
    //         },
    //         url:"http://localhost:8080/api/search/query"+"?keyword="+keyword,//请求地址
    //         // data:{},//提交的数据
    //         contentType:"application/json",
    //         //contentType: "application/x-www-form-urlencoded; charset=utf-8",
    //         type:"get",//提交的方式
    //         dataType:"json", //返回类型 TEXT字符串 JSON XML
    //         // beforeSend: function(request) {
    //         //     request.setRequestHeader("Authorization", MyLocalStorage.Cache.get('cookieKey'));
    //         // },
    //         success:function(data){
    //             //alert(data)
    //            // window.location.href="login.html"
    //         },
    //         error:function(xhr, textStatus, errorThrown){
    //             //alert(xhr.status+' '+xhr.readyState+' '+textStatus);
    //             console.log(xhr.status+' '+xhr.readyState+' '+textStatus)
    //         }
    //     })
    //
    // })








</script>
</body>
</html>